<template>
  <div class="goods">
    <el-tabs v-model="activeTab" type="card" style="width: 85%;border: none">
      <el-form :model="formData" ref="form" label-width="80px">
        <el-form-item label="">
          商品ID
          <el-input v-model="formData.id" style="width: 250px;"></el-input>
          商品名称
          <el-input v-model="formData.item" style="width: 250px;"></el-input>
          店铺名称
          <el-input v-model="formData.shop" style="width: 250px;"></el-input>
          商品类型
          <el-select v-model="formData.goodtype">
            <el-option label="全部类型" value="" style="width: 250px;"></el-option>
            <el-option label="单品" value="单品" style="width: 250px;"></el-option>
            <el-option label="套餐" value="套餐" style="width: 250px;"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          价格
          <el-input v-model="formData.minprice" placeholder="（最低）" style="width: 125px;"></el-input>
          -
          <el-input v-model="formData.maxprice" placeholder="（最高）" style="width: 125px;"></el-input>
          销量
          <el-input v-model="formData.minMonthlySales" placeholder="（最低）" style="width: 130px;"></el-input>
          --
          <el-input v-model="formData.maxMonthlySales" placeholder="（最高）" style="width: 130px;"></el-input>
          创建时间
          <el-select v-model="formData.ztime" placeholder="全部" style="width: 200px;margin-right: 20px">
            <el-option label="全部" value=""></el-option>
            <el-option label="近三个月" value="1"></el-option>
            <el-option label="今年内" value="2"></el-option>
            <el-option label="2022年" value="3"></el-option>
            <el-option label="2021年" value="4"></el-option>
            <el-option label="2020年" value="5"></el-option>
            <el-option label="2020年以前" value="6"></el-option>
          </el-select>
          审核状态
          <el-select v-model="formData.reviewstatus">
            <el-option label="全部状态" value="" style="width: 300px;"></el-option>
            <el-option label="待审核" value="0" style="width: 300px;"></el-option>
            <el-option label="审核中" value="1" style="width: 300px;"></el-option>
            <el-option label="审核通过" value="2" style="width: 300px;"></el-option>
            <el-option label="审核拒绝" value="3" style="width: 300px;"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <span v-if="activeTab=='healthThired'">
          下架状态<el-select v-model="formData.goodstatus">
          <el-option label="全部" value="" style="width: 300px;"></el-option>
          <el-option label="售罄下架" value="0" style="width: 300px;"></el-option>
          <el-option label="过期下架" value="1" style="width: 300px;"></el-option>
          <el-option label="手动下架" value="2" style="width: 300px;"></el-option>
          <el-option label="从未上架" value="3" style="width: 300px;"></el-option>
        </el-select>
          </span>
          审核人
          <el-input v-model="formData.reviewer" style="width: 300px;" v-if="true" :disabled="false"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">搜索</el-button>
        </el-form-item>
      </el-form>


      <el-tab-pane label="所有商品" name="healthArchives">
        <el-card style="border-color: white">
          <el-table :data="productList" style="width: 100%" align="center">
            <el-table-column prop="" label="图片">
              <template slot-scope="scope">
                <img :src="scope.row.goodsimage" width="50px">
              </template>
            </el-table-column>
            <el-table-column prop="" label="商品">
              <template slot-scope="scope">
                <a @click="handleViewAndProcess(scope.row)" style="cursor: pointer;">{{ scope.row.item }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="" label="价格">
              <template slot-scope="scope">
                {{ scope.row.price }}￥
              </template>
            </el-table-column>
            <el-table-column prop="packingFee" label="打包费">
              <template slot-scope="scope">
                {{ scope.row.packingfee }}￥
              </template>
            </el-table-column>
            <el-table-column prop="inventory" label="库存"></el-table-column>
            <el-table-column prop="monthlysales" label="月售"></el-table-column>
            <el-table-column prop="shop" label="所属店铺"></el-table-column>
            <el-table-column label="提交时间" width=" 160px">
              <template slot-scope="scope">
                <div>{{ scope.row.submissiontime }}</div>
                <div align="center">{{ scope.row.goodstatus == 4 ? '在售中' : '已下架' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="审核状态">
              <template slot-scope="scope">
                {{ scope.row.reviewstatus == 0 ? '待审核' : scope.row.reviewstatus == 1 ? '审核中' : scope.row.reviewstatus == 2 ? '审核通过' : '审核拒绝' }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.reviewstatus==0" @click="handleViewAndProcess(scope.row)">···
                </el-button>
                <el-button type="text" v-if="scope.row.reviewstatus==2&&scope.row.goodstatus!=4"
                           @click="updatestatus(scope.row,4)">出售
                </el-button>
                <el-button type="text" v-if="scope.row.reviewstatus==2&&scope.row.goodstatus==4"
                           @click="updatestatus(scope.row,2)">下架
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[4, 8, 16, 32]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="在售中商品" name="healthRecords">
        <el-card style="border-color: white">
          <el-table :data="productList" style="width: 100%" align="center">
            <el-table-column prop="" label="图片">
              <template slot-scope="scope">
                <img :src="scope.row.goodsimage" width="50px">
              </template>
            </el-table-column>
            <el-table-column prop="item" label="商品"></el-table-column>
            <el-table-column prop="" label="价格">
              <template slot-scope="scope">
                {{ scope.row.price }}￥
              </template>
            </el-table-column>
            <el-table-column prop="packingFee" label="打包费">
              <template slot-scope="scope">
                {{ scope.row.packingfee }}￥
              </template>
            </el-table-column>
            <el-table-column prop="inventory" label="库存"></el-table-column>
            <el-table-column prop="monthlysales" label="月售"></el-table-column>
            <el-table-column prop="shop" label="所属店铺"></el-table-column>
            <el-table-column label="提交时间" width=" 160px">
              <template slot-scope="scope">
                <div>{{ scope.row.submissiontime }}</div>
                <div align="center">{{ scope.row.goodstatus == 4 ? '在售中' : '已下架' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="审核状态">
              <template slot-scope="scope">
                {{ scope.row.reviewstatus == 0 ? '待审核' : scope.row.reviewstatus == 1 ? '审核中' : scope.row.reviewstatus == 2 ? '审核通过' : '审核拒绝' }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.reviewstatus==0" @click="handleViewAndProcess(scope.row)">···
                </el-button>
                <el-button type="text" v-if="scope.row.reviewstatus==2&&scope.row.goodstatus!=4"
                           @click="updatestatus(scope.row,4)">出售
                </el-button>
                <el-button type="text" v-if="scope.row.reviewstatus==2&&scope.row.goodstatus==4"
                           @click="updatestatus(scope.row,2)">下架
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[4, 8, 16, 32]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="在下架商品" name="healthThired">
        <el-card style="border-color: white">
          <el-table :data="productList" style="width: 100%" align="center">
            <el-table-column prop="" label="图片">
              <template slot-scope="scope">
                <img :src="scope.row.goodsimage" width="50px">
              </template>
            </el-table-column>
            <el-table-column prop="item" label="商品"></el-table-column>
            <el-table-column prop="" label="价格">
              <template slot-scope="scope">
                {{ scope.row.price }}￥
              </template>
            </el-table-column>
            <el-table-column prop="packingFee" label="打包费">
              <template slot-scope="scope">
                {{ scope.row.packingfee }}￥
              </template>
            </el-table-column>
            <el-table-column prop="inventory" label="库存"></el-table-column>
            <el-table-column prop="monthlysales" label="月售"></el-table-column>
            <el-table-column prop="shop" label="所属店铺"></el-table-column>
            <el-table-column label="提交时间" width=" 160px">
              <template slot-scope="scope">
                <div>{{ scope.row.submissiontime }}</div>
                <div align="center">{{ scope.row.goodstatus == 4 ? '在售中' : '已下架' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="审核状态">
              <template slot-scope="scope">
                {{ scope.row.reviewstatus == 0 ? '待审核' : scope.row.reviewstatus == 1 ? '审核中' : scope.row.reviewstatus == 2 ? '审核通过' : '审核拒绝' }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.reviewstatus==0" @click="handleViewAndProcess(scope.row)">···
                </el-button>
                <el-button type="text" v-if="scope.row.reviewstatus==2&&scope.row.goodstatus!=4"
                           @click="updatestatus(scope.row,4)">出售
                </el-button>
                <el-button type="text" v-if="scope.row.reviewstatus==2&&scope.row.goodstatus==4"
                           @click="updatestatus(scope.row,2)">下架
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[4, 8, 16, 32]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'healthArchives',
      formData: {},
      productList: [],
      current: 1,
      pageSize: 4,
      total: 0,
    };
  },
  watch: {
    activeTab(newValue, oldValue) {
      console.log(`activeTab属性从 ${oldValue} 变为了 ${newValue}`);
      this.formData.goodstatus2=null
      this.formData.goodstatus=null
      // 在这里可以添加当activeTab属性变化时需要执行的具体业务逻辑，比如根据新的tab值加载不同的数据等
      this.submitForm();
    }
  },
  methods: {
    resetForm() {
      this.formData = {};
    },
    submitForm() {
      // 这里可以添加提交表单数据到后端的逻辑
      // 例如，使用axios发送POST请求
      if (this.activeTab == 'healthArchives') {
        this.formData.goodstatus2 = false
        this.axios.post(`http://localhost:8000/xm-goods/goods-list/findpage?current=${this.current}&pageSize=${this.pageSize}`, this.formData).then(res => {
          if (res.data.code == 200) {
            this.productList = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: '查询失败',
              type: 'error'
            })
          }
        })
      } else if (this.activeTab == 'healthRecords') {
        this.formData.goodstatus = 4
        this.formData.goodstatus2 = false
        console.log('提交表单数据：', this.formData);
        this.axios.post(`http://localhost:8000/xm-goods/goods-list/findpage?current=${this.current}&pageSize=${this.pageSize}`, this.formData).then(res => {
          if (res.data.code == 200) {
            this.productList = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: '查询失败',
              type: 'error'
            })
          }
        })
      }else if (this.activeTab == 'healthThired'){
        this.formData.goodstatus2 = true
        console.log('提交表单数据：', this.formData);
        this.axios.post(`http://localhost:8000/xm-goods/goods-list/findpage?current=${this.current}&pageSize=${this.pageSize}`, this.formData).then(res => {
          if (res.data.code == 200) {
            this.productList = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: '查询失败',
              type: 'error'
            })
          }
        })
      }

    },
    updatestatus(row, status) {
      row.goodstatus = status;
      this.axios.post(`http://localhost:8000/xm-goods/goods-list/update`, row).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'error'
          })
        }
        this.submitForm();
      })
    },
    handleViewAndProcess(row) {
      // 这里添加查看并处理的逻辑
      localStorage.setItem('goodid', row.id);
      this.$router.push('/goodxq');
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.submitForm();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.submitForm();
    }
  },
  created() {
    this.submitForm();
  }
};
</script>

<style>

</style>
